<template>
<div>
    <section class="section_form">
        <div id="consultation-form" class="feed-form" action="">
            <div style="margin-bottom:30px;">后台管理</div>
            <input  placeholder="账号" type="text" v-model="form.username">
            <input   placeholder="密码" type="password" v-model="form.password">
            <div style="display:flex;justify-content:space-between">
                <input placeholder="验证码" style="width: 120px;" v-model="form.code">
                <img :src="captcha" alt="" style="height:54px;width:120px;" @click="refresh">
            </div>
            <button class="button_submit" @click="login">登录</button>
        </div>
    </section>
</div>

</template>

<script>
import request from '@/util/request.js'

export default {
    data(){
        return{
            form:{
                username:'',
                password:'',
                uuid:'',
                code:''
            },
            captcha:'',
            isRefresh:5
        }
    },
    methods:{
        getCaptcha(){
            request.get('/admin/captcha').then(res=>{
                console.log(res.data);
                this.captcha = res.data.base64Img
                this.form.uuid = res.data.uuid
            }).catch(err =>{
              if (err.response) {
                    this.$notify.error(err.message)
                } else {
                    this.$notify.error('网络错误')
                }
            })
        },
        refresh(){
            console.log(this.isRefresh);
            if(this.isRefresh<=0){
                // 当前短时间超过了这个值
                this.$notify.warning({
                    title:'警告',
                    message:'频繁操作'
                })
                setTimeout(()=>{
                    this.isRefresh = 5
                },30000)
                return;
            }
            this.isRefresh -=1
            this.getCaptcha()
        
        },
        login(){
            console.log(this.form);
            request.post('/admin/login',this.form).then(res=>{
                localStorage.setItem("token",res.data.token)
                localStorage.setItem("userInfo",JSON.stringify(res.data.adminInfo))
                console.log(res.data);
                this.$router.push('/main')
            }).catch(err=>{
              if (err.response) {
                  this.$notify.error(err.message)
              } else {
                  this.$notify.error('网络错误')
              }
            })
        }
    },
    mounted(){
        this.getCaptcha()
    }
}
</script>

<style scoped>
.feed-form {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  width: 300px;
  margin-left: calc((100vw - 360px)/ 2);
  margin-top: 10%;
  padding: 30px;
  border-radius: 4px;
  box-shadow: 5px 5px 10px 5px #dcdcdc,-5px -5px 10px 5px #dcdcdc;
}

.feed-form input {
  height: 54px;
  border-radius: 5px;
  background: white;
  margin-bottom: 15px;
  border: none;
  padding: 0 20px;
  font-weight: 300;
  font-size: 14px;
  color: #4B4B4B;
}

.button_submit:hover, .feed-form input:hover {
  transform: scale(1.009);
  box-shadow: 0px 0px 3px 0px #212529;
}

.button_submit {
  width: 100%;
  height: 54px;
  font-size: 14px;
  color: white;
  background: rgb(169, 194, 212);
  border-radius: 5px;
  border: none;
  font-weight: 500;
  text-transform: uppercase;
}

</style>
